<template>
  <div style="text-align: left">
<!--    <el-select v-model="lang">-->
<!--      <el-option :label="'java'" :value="'java'"></el-option>-->
<!--      <el-option :label="'cpp'" :value="'cpp'"></el-option>-->
<!--      <el-option :label="'python'" :value="'python'"></el-option>-->
<!--    </el-select>-->
<!--    {{lang}}-->
    <codemirror
      v-model="value"
      placeholder="代码写在这里......"
      :style="style"
      :autofocus="true"
      :indent-with-tab="true"
      :tabSize="4"
      :extensions="extensions"
      @ready="ready"
      @change="change"
      @focus="focus"
      @blur="blur"
    />
  </div>
</template>

<script>
import { Codemirror } from 'vue-codemirror'
import { cpp } from '@codemirror/lang-cpp'
import { java } from '@codemirror/lang-java'
import { python } from '@codemirror/lang-python'
import { oneDark } from '@codemirror/theme-one-dark'
import { ref } from 'vue'
export default {
  name: 'CodemirrorEditor',
  props: { modelValue: {}, style: {}, codeLang: {} },
  components: {
    Codemirror
  },
  computed: {
    value: {
      get () {
        return this.modelValue
      },
      set (value) {
        this.$emit('update:modelValue', value)
        this.$emit('input', value)
      }
    }
  },
  // setup () {
  //   const langMap = {
  //     java: java(),
  //     cpp: cpp(),
  //     python: python()
  //   }
  //   console.log(langMap)
  //   console.log(cpp())
  //   console.log()
  //   const props = defineProps({ lang: {} })
  //   const { lang } = toRefs(props)
  //   console.log(lang)
  //   const extensions = ref([cpp(), oneDark])
  //   return {
  //     extensions
  //   }
  // },
  data () {
    return {
      lang: 'cpp',
      langValue: ref('cpp'),
      extensions: ref([cpp(), oneDark])
    }
  },
  methods: {
    ready (even) {
      this.$emit('ready', even)
    },
    change (even) {
      this.$emit('change', even)
    },
    focus (even) {
      this.$emit('focus', even)
    },
    blur (even) {
      this.$emit('blur', even)
    },
    changeLang () {
      if (this.lang) {
        if (this.lang === 'python' || this.lang === 'python3' || this.lang === 'python2') {
          this.extensions = [python(), oneDark]
        } else if (this.lang === 'java' || this.lang === 'java8') {
          this.extensions = [java(), oneDark]
        } else if (this.lang === 'g++' || this.lang === 'gcc'){
          this.extensions = [cpp(), oneDark]
        }
      }
    },
    changeCodeLang () {
      this.lang = this.codeLang
    }
  },
  watch: {
    lang: 'changeLang',
    codeLang: 'changeCodeLang'
  }
}
</script>

<style scoped>

</style>
